<template>
  <form>
    <p>
      <label for="name">name</label>
      <input id="name" type="text" v-model="form.name" />
    </p>
    <p>
      <label for="address">address</label>
      <input id="address" type="text" v-model="form.address" />
    </p>
    <p>
      <label for="memberAmount">memberAmount</label>
      <input id="memberAmount" type="number" v-model.number="form.memberAmount" />
    </p>
  </form>
</template>

<script setup>
defineOptions({
  name: 'ProviderForm',
})

const form = defineModel()
</script>

<style scoped lang="scss">
form {
  display: flex;
  flex-direction: column;
  gap: 8px;

  p {
    margin: 0;
    padding-left: 200px;
    position: relative;
    text-align: start;

    label {
      display: block;
      width: 200px;
      box-sizing: border-box;
      position: absolute;
      left: 0;
      top: 0;
      line-height: 32px;
      text-align: right;
      padding-right: 8px;
      font-weight: bold;
    }

    input {
      width: 400px;
    }
  }
}
</style>
